// =============================================================================
// SCSS/SITE/STACKS/RENEW/_WIDGETBAR.SCSS
// -----------------------------------------------------------------------------
// Contains styles for the widgetbar.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-widgetbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: $widgetbarColor;
  background-color: $widgetbarBackground;
  z-index: $zindexNavbar + 3;
  @include box-shadow(#{$baseBoxShadow});
  @include break(cubs) {
    position: absolute;
  }

  .widget {
    margin-top: 3em;
  }
}

.x-widgetbar-inner {
  padding: 2.5% 0;

  [class*="span"] {
    .widget:first-child {
      margin-top: 0;
    }
  }

  @include break(cubs) {
    padding: 6.5% 0;

    [class*="span"] {
      .widget:first-child {
        margin-top: 3em;
      }
    }

    [class*="span"]:first-child {
      .widget:first-child {
        margin-top: 0
      }
    }
  }
}

.x-btn-widgetbar {
  position: fixed;
  top: 0;
  right: 0;
  border-top: 19px solid $black;
  border-left: 19px solid transparent;
  border-right: 19px solid $black;
  border-bottom: 19px solid transparent;
  @include font-size(1.2);
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
  z-index: $zindexNavbar + 3;
  @include break(cubs) {
    position: absolute;
  }

  i {
    position: absolute;
    top: -15px;
    right: -13px;
  }

  &:hover {
    color: rgba(255, 255, 255, 0.85);
    border-top-color: lighten($black, 25%);
    border-right-color: lighten($black, 25%);
  }
}